<template>
    <div>
        <div style="margin: 20px 0;">
            <el-button type="primary" @click="handlerAdd">新增专业</el-button>
        </div>
     <el-table :data="majors" style="width: 100%; height: 500px;">
    <el-table-column type="index" label="序号" width="80"></el-table-column>
    <el-table-column prop="majorname" label="专业名称"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row._id)">
          编辑
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.row._id)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页控件 -->
  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 添加/编辑专业对话框 -->
    <el-dialog v-model="majorFormVisible" title="添加/编辑专业" width="500">
    <el-form :model="major" label-width="100px" :rules="rules" style="width: 400px;" ref="majorFormRef" label-position="right">
      <el-form-item label="专业名称" prop="majorname">
        <el-input v-model="major.majorname" aria-placeholder="请输入专业名称"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="major._id == null? addData(majorFormRef) : updateData(majorFormRef)">确定</el-button>
        <el-button @click="majorFormVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus';
import { nextTick, onMounted, reactive, ref } from 'vue';
// 引入数据类型
import type { majorInfoData } from '@/api/major/type';
// 引入专业小仓库
import useMajorStore from '@/store/modules/major';
const majorStore = useMajorStore()
// 专业数据列表
const majors = ref<majorInfoData[]>([])
// 新增/编辑专业数据
const major = ref<majorInfoData>({
    _id: null,
    majorname: '',
})
// 添加专业弹窗是否显示
const majorFormVisible = ref(false)
// 表单ref对象
const majorFormRef = ref()
// 表单校验规则
const rules = reactive<FormRules>({
    majorname: [{ required: true, message:'请输入专业名称', trigger: 'blur' }]
})
// 打开添加专业对话框
const handlerAdd = ()=>{
    majorFormVisible.value = true
    major.value = {
        _id:null,
        majorname:''
    }
    // 清空表单数据
    nextTick(()=>{
        // @ts-ignore
        majorFormRef.value.resetFields()
    })
}
// 获取专业列表
const getMajorList = ()=>{
    majorStore.getMajorList({page:currentPage.value,size:pageSize.value}).then((response:any)=>{
        // @ts-ignore
        majors.value = majorStore.majors
        total.value = response?.total as number
    })
}
// 添加专业
const addData = (formEl: FormInstance | undefined) => {
    if(!formEl) return
    formEl.validate((valid) => {
        if(valid){
            majorStore.addMajor(major.value).then(()=>{
                majorFormVisible.value = false
                getMajorList()
            })
        }else{

        }
    })
}
// 当前页码
const currentPage = ref(1)
// 一页显示多少条数据
const pageSize = ref(5)
// 总数据条数
const total = ref(0)
// 当每页显示条数发生变化时回调函数
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getMajorList()
}
// 当页码发生变化时回调函数
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getMajorList()
}

// 打开编辑窗口
const handleEdit = (_id:string)=>{
    handlerAdd()
    majorStore.getMajorById(_id).then((response:any)=>{
        // @ts-ignore
        major.value = response
    })
}
// 更新/编辑专业
const updateData = (formEl: FormInstance | undefined) => {
    if(!formEl) return
    formEl.validate((valid) => {
        if(valid){
            majorStore.updateMajor(major.value).then(()=>{
                majorFormVisible.value = false
                getMajorList()
            })
        }else{

        }
    })
}
// 删除专业
const handleDelete = (_id:string)=>{
    ElMessageBox.confirm(
    '确定要删除此条数据吗？',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        majorStore.deleteMajor(_id).then(()=>{
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            getMajorList()
        })
    })
    .catch(() => {

    })
}
onMounted(()=>{
    getMajorList()
})
</script>

<style scoped>

</style>